<template>
	<view>
		<c-sticky class="pb-2">
			<c-status-bar></c-status-bar>
			<c-page-header title="话题"></c-page-header>
			<c-search-bar placeholder="搜索话题" @confirm="onSearchBarConfirm"/>
		</c-sticky>
		<c-alert class="mx-2 my-4">
			<view class="iconfont icon-jinggao font-md mr-1"/>
			请勿添加无关话题，违规者删帖！
		</c-alert>
		
		<c-desc title="热门话题" action-title="发布话题" @action="openReleasePopup"></c-desc>
		
		<c-topics-release-popup ref="popup" @release="onTopicRelease"/>
		
		
		<!-- :page-size="1" -->
		<unicloud-db v-slot="{data,loading,error,hasMore}" collection="topics" 
		ref="udb"
		orderby="creat_date desc"
		field="title,desc,creat_date,cover.url as url"
		:where="searchRule"
		>
			<!-- <view v-if="error">
				{{error.message}}
			</view> -->
			<c-error-tip v-if="error" :msg="error.message"></c-error-tip>
			<view v-else>
				<!-- {{data}} -->
				<c-topic v-for="item of data" :v="item" :key="item._id"
				@collect="resolveCollectTopics"
				:collectTopics="collectTopics"
				/>
				
				<c-scroll-load-more :loading="loading" :hasMore="hasMore"/>
			</view>
			
		</unicloud-db>
		
		<c-topics-carry-confirm  v-if="carryConfirm" :show="carryConfirm" :num="collectTopics.length"
		@confirm="onCarryConfirm"
		/>
		<c-back-top></c-back-top>
	</view>
</template>

<script>
	import BackTopMixin from "@/components/c-back-top/c-back-top-mixin.js"
	export default {
		mixins:[BackTopMixin],
		onReachBottom(){
			this.$refs.udb.loadMore()
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear:true
			},uni.stopPullDownRefresh)
		},
		data() {
			return {
				show:false,
				searchText:"",
				collectTopics:[]
			}
		},
		computed:{
			searchRule(){
				return `${new RegExp(this.searchText,'gi')}.test(title)`
			},
			carryConfirm(){
				return this.collectTopics.length>0
			}
		},
		methods: {
			onCarryConfirm(){
				uni.showModal({
					title:"话题",
					content:"确认携带这些话题吗？",
					success:op=>{
						const {confirm} = op
						// console.log(confirm)
						if (confirm){
							uni.$emit("carryTopics",this.collectTopics)
							uni.navigateBack()
						}
					}
				})
			},
		 async	onTopicRelease(payload,events){
				try{
					this.$U.loading()
					await this.$A.topic.create(payload)
					this.$U.notice("发布话题成功")
					events.success()
				}catch(e){
					this.$U.notice(e.message)
				}finally{
					this.$U.hideLoading()
				}
				console.log(payload)
			},
			onSearchBarConfirm(v){
				this.searchText = v
				console.log(v,"test")
			},
			openReleasePopup(){
				// console.log("fabuhuati")
				this.$refs.popup.open()
			},
			resolveCollectTopics(v){
					// console.log(v)
				const i = this.collectTopics.findIndex(topic=>{
					return topic._id === v._id
				})
				
				// 已经有的话题清除掉
				const hasCollected = i!==-1
				if (hasCollected){
					return this.collectTopics.splice(i,1)
				}
				
				// 超出的话题通知
				const bufferLength=4
				if(this.collectTopics.length>=4){
					return this.$U.notice(`携带的话题数量不能超过${bufferLength}`)
					
				}
				
				// 没有的话题加进来
				this.collectTopics.push(v)
					
			}
		}
	}
</script>

<style>
	
</style>